<template>
  <div>
    <a-button type="primary" @click="open" size="small" shape="circle">
      <template #icon>
        <icon-settings />
      </template>
    </a-button>
    <a-modal
      v-model:visible="visible"
      :mask-closable="false"
      title="列设置"
      title-align="start"
      width="800px"
    >
      <div style="display: flex; justify-content: space-between">
        <div style="width: 600px">
          <div style="width: 100%; margin-left: 5px; font-size: 14px; margin-bottom: 15px"
            >列选择 <span style="color: #86909c">({{ num }}/{{ sortList.length }})</span></div
          >

          <a-checkbox
            style="width: 100px; margin-bottom: 17px"
            v-for="item in sortList"
            @change="changeFn"
            :key="item.title"
            v-model="item.checked"
            >{{ item.title }}</a-checkbox
          >
        </div>
        <div
          style="
            width: 200px;
            height: 515px;
            overflow-y: auto;
            text-align: center;
            border-left: 1px solid #f2f3f5;
            scrollbar-width: none;
          "
        >
          <div style="font-size: 14px; text-align: left; margin-left: 20px"
            >已选择 <span style="color: #86909c">共{{ num }}个</span></div
          >
          <draggable
            :list="innerTableProps"
            animation="500"
            style="margin-left: 20px; margin-top: 15px"
            item-key="key"
          >
            <template #item="{ element }">
              <div
                v-if="element.checked == true"
                class="flex"
                style="text-align: left; margin-bottom: 17px"
              >
                <icon-drag-dot-vertical style="margin-top: 4px" />
                <a-checkbox
                  v-model="element.checked"
                  v-if="element.checked == true"
                  :label="element.prop"
                  @change="onChange"
                >
                  {{ element.title }}
                </a-checkbox>
              </div>
            </template>
          </draggable></div
        >
      </div>
      <template #footer>
        <a-space
          style="width: 100%; justify-content: space-between"
          content-class=" flex space-between"
        >
          <div @click="deleteFn" style="cursor: pointer; font-size: 13px; color: #3491fa"
            >恢复默认
          </div>
          <div>
            <a-button @click="visible = false" style="margin-right: 10px"> 取消 </a-button>
            <a-button type="primary" @click="onUpdateValue"> 确定 </a-button>
          </div>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { TablePropsType } from '@/types/components'
  import { deleteNumber } from '@/api/url'
  import { defineComponent, PropType, ref, toRef, watch } from 'vue'
  import draggable from 'vuedraggable'
  import useCommonStore from '@/store/modules/common'
  import { Message, Modal } from '@arco-design/web-vue'
  import { get } from '@/api/http'
  export default defineComponent({
    name: 'SortableTable',
    components: { draggable },
    props: {
      columns: {
        type: Array as PropType<TablePropsType[]>,
        require: true,
      },
      namere: {
        type: String,
        default: '',
        require: true,
      },
      oldList: {
        type: Array as PropType<TablePropsType[]>,
        require: true,
      },
    },
    emits: ['update', 'set'],
    setup(props, { emit }) {
      const useCommon = useCommonStore()
      const visible = ref(false)
      const tempTableProps = toRef(props, 'columns')
      const tempArray: any = ref([])
      const innerTableProps: any = ref([])
      const sortList: any = ref([])
      const list: any = ref([])
      const num: any = ref(0)
      const isIndeterminate = ref(
        innerTableProps.value.filter((it: { checked: any }) => it.checked).length !==
          innerTableProps.value.length
      )
      const allChecked = ref(innerTableProps.value.every((it: { checked: any }) => it.checked))
      function onAllChange(value: any) {
        innerTableProps.value.forEach((it: { checked: any }) => {
          it.checked = value
        })
        // emit(
        //   'update',
        //   innerTableProps.value.filter((it: { checked: any }) => it.checked)
        // )
        // emit(
        //   'set',
        //   innerTableProps.value.filter((it: { checked: any }) => it.checked)
        // )
      }
      const onChange = () => {
        sortList.value.forEach((item: any) => {
          innerTableProps.value.forEach((items: any) => {
            if (item.title == items.title) {
              item.checked = items.checked
            }
          })
        })
        // const checkedItems = innerTableProps.value.filter((it: { checked: any }) => it.checked)
        // allChecked.value = checkedItems.length === innerTableProps.value.length
        // isIndeterminate.value =
        //   checkedItems.length > 0 && checkedItems.length !== innerTableProps.value.length

        emit('update', innerTableProps.value)
      }
      const deleteFn = () => {
        Modal.warning({
          title: '操作确认',
          content: '确定要重置此排序吗？',
          cancelText: '取消',
          titleAlign: 'start',
          hideCancel: false,
          okText: '确认',
          onOk: () => {
            get({
              url: deleteNumber,
              data: {
                name: props.namere,
              },
            }).then((res) => {
              if (res.code == 0) {
                props.oldList.forEach((item) => {
                  item.checked = true
                })
                emit('update', props.oldList)
                emit('set', props.oldList)
                let a = JSON.stringify(props.oldList)
                list.value = JSON.parse(a)
                Message.success('重置成功')
                visible.value = false
              }
            })
          },
        })
      }
      const onReset = () => {
        innerTableProps.value.forEach((it: { checked: boolean }) => (it.checked = true))
        onChange()
      }
      function onUpdateValue() {
        visible.value = false
        // const array = innerTableProps.value.filter((it: { checked: any }) => it.checked)
        list.value = []
        innerTableProps.value.forEach((item: any) => {
          list.value.push(item)
        })
        emit('update', list.value)
        emit('set', list.value)
      }
      const changeFn = () => {
        num.value = 0
        sortList.value.forEach((item: any) => {
          innerTableProps.value.forEach((items: any) => {
            if (item.title == items.title) {
              items.checked = item.checked
            }
          })
        })
        innerTableProps.value.find((item: any) => {
          if (item.checked == true) {
            num.value++
          }
        })
      }
      const open = () => {
        sortList.value = props.oldList
        innerTableProps.value = props.columns
        changeFn()
        visible.value = true
      }
      watch(
        () => tempTableProps.value,
        (oldVal, newVal) => {
          let json = JSON.stringify(oldVal)
          tempTableProps.value = oldVal
          newVal?.forEach((item: any) => {
            if (json.indexOf(item.title) < 0) {
              item.checked = false
              oldVal?.push(item)
            }
          })
          let a = []
          a =
            tempTableProps.value
              ?.filter((it: { key: any }) => !!it.key)
              .map((it: TablePropsType) => {
                return {
                  ...it,
                } as TablePropsType
              }) || []
          tempArray.value = a
          innerTableProps.value = tempArray.value
          sortList.value = props.oldList
          // const checkedItems = innerTableProps.value.filter((it: { checked: any }) => it.checked)
          // emit('update', checkedItems)
          // emit('set', checkedItems)
        }
      )
      return {
        deleteFn,
        innerTableProps,
        isIndeterminate,
        allChecked,
        onAllChange,
        onChange,
        onReset,
        onUpdateValue,
        visible,
        changeFn,
        list,
        num,
        open,
        useCommon,
        sortList,
      }
    },
  })
</script>
<style lang="less" scoped>
  :deep(.arco-modal .arco-modal-body) {
    padding: 0 !important;
  }
</style>
